<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="utf-8">
		<title>考卷商城</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" th:href="@{static/layuiadmin/layui/css/layui.css}" media="all">
		<link rel="stylesheet" href="../../layuiadmin/style/admin.css"  th:href="@{static/layuiadmin/style/admin.css}" media="all">
		<link rel="stylesheet" href="../../layuiadmin/style/template.css" th:href="@{static/layuiadmin/style/template.css}" media="all">
		<link rel="stylesheet" href="../../layuiadmin/style/goodslist.css" th:href="@{static/layuiadmin/style/goodslist.css}" media="all"/>
		<link rel="stylesheet" href="../../layuiadmin/style/teacher/myLibraryTch.css" th:href="@{static/layuiadmin/style/teacher/myLibraryTch.css}" media="all">
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="../../layuiadmin/layui/layui.js" th:src="@{static/layuiadmin/layui/layui.js}"></script>
		<!--变量定义-->
		<script type="text/javascript">
			var papers = new Array();
			var filed = ["IT技术", "IQ&EQ", "招聘真题", "资格证书", "学历教育", "培训学习"];
		</script>
		<!--方法-->
		<script type="text/javascript">
			//初始化题库的数据，存在papers里
			function initPapers() {
				if(getQueryVariable("haskey") != false){
					var keyword = sessionStorage.getItem('keyword');
					$('#itemtype-bread').html(keyword);
					$.ajax({
			          url: "/keywordSearchPaper",
			          type: "POST",
			          async:false,
			          dataType: "json",
			          xhrFields: {
			          	withCredentials: true
			          },
			          crossDomain: true,
			          data: {
			            "keyword": keyword
			          },
			          success: function (data) {
//			          	console.log(data);
							$.each(data, function(i, value) {
	
								papers.push(value);
								
							});
							console.log(papers);
			          },
			          error: function (e) {
			            layer.msg("系统异常");
			          }
			        });
				}else{
					var itemtype = getQueryVariable("itemtype");
					if(itemtype != false){
						//面包屑显示
						//$('.layui-breadcrumb').find('a').eq(1).val(filed[itemtype-1]);
						$('#itemtype-bread').html(filed[itemtype-1]);
					}else{
						$('#itemtype-bread').html("全部");
					}
					$.ajax({
						url: "/getShopPapers",
						type: "POST",
						dataType: "json",
						data: {
								itemtype:getQueryVariable("itemtype")
						},
						xhrFields: {
							withCredentials: true
						},
						crossDomain: true,
						success: function(data) {
							console.log(data);
							$.each(data, function(i, value) {
	
								papers.push(value);
	
							});
	
						},
						error: function(e) {
							layer.msg("系统异常");
						}
					});
				}
			}
			//初始化元素的事件
			function initJqueryFunc() {
				
				$('button[class="layui-btn layui-btn-sm layui-btn-normal"]').click(function(){
					var ids = $(this).attr('id').split("-");
					if(ids[0] == "itemButtonID"){
						layer.confirm('确认要购买吗？', {
							btn: ['确定', '取消'] //按钮
						}, function(index) {
							
							console.log(ids[1]);
							layer.close(index);
							buyPaper(ids[1]);
							//此处请求后台程序，下方是成功后的前台处理……
						});
					}
					
				})
			}
			//购买题库
			function buyPaper(itemid) {
				$.ajax({
					url: "/buyPaper",
					type: "POST",
					dataType: "text",
					data: {
						"itemid": itemid
					},
					
					xhrFields: {
						withCredentials: true
					},
					crossDomain: true,
					success: function(data) {
						if(data == 0) {
							layer.msg("您的积分不足！");
						} else {
							deletePapersHtml(itemid);
							removePaper(itemid);
							layer.msg("购买成功！");

						}

					},
					error: function(e) {
						layer.msg("系统异常");
					}
				});
			};
			//删除papers中的题库
			function removePaper(itemid) {
				for(var i = 0; i < papers.length; i++) {
					if(papers[i].quesPaperId == itemid) {
						papers.splice(i, 1);
					}

				}
			};
			//同步删除html页面内容
			function deletePapersHtml(itemid) {
				var box = $('#itemID-' + itemid);
				console.log("删除id:");
				console.log(itemid);
				box.parent().parent().remove();
			};
			//获得url后缀参数
			function getQueryVariable(variable){
			    var query = window.location.search.substring(1);
			    var vars = query.split("&");
			    for (var i=0;i<vars.length;i++) {
			        var pair = vars[i].split("=");
			        if(pair[0] == variable){return pair[1];}
			    }
			    return(false);
			}
		</script>
		<script type="text/javascript">
			$(function(){
				initPapers();
				layui.config({
				base: '/static/layuiadmin/' //静态资源所在路径
			}).extend({
				index: 'lib/index' //主入口模块
			}).use(['index']);
			layui.use(['laypage', 'layer', 'form'], function() {
				var laypage = layui.laypage,
					layer = layui.layer,
					form = layui.form;
				form.render();
				//调用分页
				laypage.render({
					elem: 'demo0',
					count: papers.length,
					limit: 6,
					jump: function(obj) {
						//此处是必要的，当papers内容变更（增删题库）时，需要重新给count赋值以免页数不对
						obj.count = papers.length;
						//模拟渲染
						document.getElementById('item').innerHTML = function() {
							console.log("obj:");
							console.log(obj);
							console.log(papers);
							var arr = [],
								thisData = papers.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
							layui.each(thisData, function(index, item) {
								var str =
									'<div id="item-list" class="layui-col-md4 layui-col-sm4">' +
									'<div class="cmdlist-container">' +
									'<div id="itemID-' + item.paperId + '" class="item-top">' +
									'<div class="top-line"></div>' +
									'</div>' +
									'<div class="item-title">' +
									'<a href="javascript:;" class="item-name" title="《五年编程三年脱发》精选题库">' +
									item.paperName +
									'<p>' +
									'类型：<span>' + filed[item.paperType-1] + '</span>' +
									'</p>' +
									'</a>' +
									'</div>' +
									'<div class="cmdlist-text">' +
									'<div class="item-intro">' +
									'<p>价格：<span>' + item.pointPrice + '</span>积分</p>' +
									'<button id="itemButtonID-' + item.paperId + '" type="button" class="layui-btn layui-btn-sm layui-btn-normal">' +
									'<i class="layui-icon layui-icon-add-1"></i>' +
									'购买考卷' +
									'</button>' +
									'</div>' +
									'</div>' +
									'</div>' +
									'</div>';
								arr.push(str);
							});

							return arr.join('');
						}();
						//初始化事件
						initJqueryFunc();
					}
				});
			});
				
				//Enter键提交搜索关键字事件
		    	$(document).keypress(function(event){
			  		if(event.keyCode=="13"){
			  			$("#item-search").click();
			  		}
			  		
			  	});
		    	//搜索按钮点击事件
		    	$("#item-search").click(function(){
		    		console.log("进入search");
		    		var keyword = $('input[class="layui-input layui-input-search"]').val();
		    		if(keyword == ""){
		    			layer.msg("搜索不能为空！");
		    			return false;
		    		}
		    		sessionStorage.setItem('keyword',keyword);
		    		console.log(keyword);
		    		window.location.href="toShop?haskey=1";
		    	});
				$(".goodslist-left-item").click(function(){
					location.href = $(this).find('a').attr('href');
				});
			});
		</script>
	</head>

	<body>
		<div class="layui-layout layui-layout-admin">
			<div class="layui-header">
				<div class="admin-login-box">
					<a class="logo" style="left: 0;" href="#">
						<span style="width: 50px;height: 100px;">
								<img src="../../layuiadmin/style/res/logo.png" th:src="@{static/layuiadmin/style/res/logo.png}" style="width: 200px; height: 50px;">
							</span>
					</a>
					<div class="admin-side-toggle">
						<i class="fa fa-bars" aria-hidden="true"></i>
					</div>
				</div>

				<!-- 头部区域 -->
				<ul class="layui-nav layui-layout-left">

				<li class="layui-nav-item layui-hide-xs" style="margin-right: 5px;" lay-unselect>
		            <input type="text" placeholder="搜索..." class="layui-input layui-input-search">
		          </li>
		          <li class="layui-nav-item" style="margin-left: 0px;" lay-unselect>
		          	<button type="button" id="item-search" class="layui-btn layui-btn-sm layui-btn-normal">
									<i class="layui-icon layui-icon-search"></i>
									搜索
								</button>
		          </li>
				</ul>
				<ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">

					<li class="layui-nav-item" lay-unselect>
						<a href="tohome" layadmin-event="message" lay-text="首页">

							<!--
              	作者：1173073908@qq.com
              	时间：2019-06-13
              	描述：<i class="layui-icon layui-icon-notice"></i>  
              	<span class="layui-badge-dot"></span>
              -->
							首页
							<!-- 如果有新消息，则显示小圆点 -->

						</a>
					</li>
					<li class="layui-nav-item layui-hide-xs" lay-unselect>
						<a style="color: #75dd6e;" lay-href="user/goodslist.html" href="javascript:;" >
							<!--
                	作者：1173073908@qq.com
                	时间：2019-06-13
                	描述：<i class="layui-icon layui-icon-theme"></i>
                -->
							商城
						</a>
					</li>
					<li class="layui-nav-item layui-hide-xs" lay-unselect>
						<a href="toindex">
							<!--
              	作者：1173073908@qq.com
              	时间：2019-06-13
              	描述：<i class="layui-icon layui-icon-note"></i>
              -->
							个人中心
						</a>
					</li>
					
					<li class="layui-nav-item" lay-unselect>
						<a href="javascript:;">
							<cite th:text="${session.name}"></cite>
						</a>
						<dl class="layui-nav-child">
							<dd>
								<a href="toindex">基本资料</a>
							</dd>
							<dd>
								<a href="toindex">修改密码</a>
							</dd>
							<hr>
							<dd style="text-align: center;">
								<a href="logout">退出</a>
							</dd>
						</dl>
					</li>

					<li class="layui-nav-item layui-hide-xs" lay-unselect>
						<a href="javascript:;" layadmin-event="fullscreen">
							<i class="layui-icon layui-icon-screen-full"></i>
						</a>
					</li>
				</ul>
			</div>

		</div>

		<div class="layui-row" style="margin-top: 50px;">
			<div class="layui-col-md1">
				&nbsp;
			</div>
			<div class="layui-col-md2">
				<!--左侧选择标签的导航栏-->
				<div class="goodslist-left" style="height: 360px;">
					<div class="goodslist-left-item">
						<a href="toShop?itemtype=1">IT技术</a>
						<p></p>
					</div>
					<div class="goodslist-left-item">
						<a href="toShop?itemtype=2">IQ&EQ</a>
						<p></p>
					</div>
					<div class="goodslist-left-item">
						<a href="toShop?itemtype=3">招聘真题</a>
						<p></p>
					</div>
					<div class="goodslist-left-item">
						<a href="toShop?itemtype=4">资格证书</a>
						<p></p>
					</div>
					<div class="goodslist-left-item">
						<a href="toShop?itemtype=5">学历教育</a>
						<p></p>
					</div>
					<div class="goodslist-left-item">
						<a href="toShop?itemtype=6">培训学习</a>
						<p></p>
					</div>
				</div>
				
			</div>
			<div class="layui-col-md8">
				<div class="layui-fluid layadmin-cmdlist-fluid">
					<div>
						<span class="layui-breadcrumb" lay-separator=">">
 							<a href="toShop">全部考卷</a>
 							<a id="itemtype-bread" href="">IT技术</a>
							<!--<a><cite>IT技术</cite></a>-->
						</span>
					<div class="goodslist-nav">

						<table class="layui-table" lay-skin="line" style="margin-bottom: 0px;">
								<colgroup>
									<col width="100">
									<col width="80">
									<col width="80">
								</colgroup>
								<tbody>
									<tr>
										<td style="color: gray;">排序方式</td>
										<td>
											<a href="">最新</a>
										</td>
										<td>
											<a href="">最热</a>
										</td>
										<td>
											<a href="">相关度</a>
										</td>
									</tr>
								</tbody>

							</table>
					<!--<table class="layui-table" lay-skin="line" style="margin-top: 0px;">
								<colgroup>
									<col width="100">
									<col width="100">
									<col width="100">
									<col width="100">
								</colgroup>
								<tbody>
									<tr>
										<td style="color: gray;">相关标签</td>
										<td>
											<a href="">IT技术<span>8</span></a>
										</td>
										<td>
											<a href="">前端开发<span>3</span></a>
										</td>
										<td>
											<a href="">后端开发<span>5</span></a>
										</td>
										<td>
											<a href="">软件开发<span>8</span></a>
										</td>
									</tr>
								</tbody>

							</table>-->
				
					</div>
					</div>

					<!--
			----------------------------此处为右侧商品列表----------------------------------------
			-->

		<div id="item" class="layui-row layui-col-space30">

						<div class="layui-col-md4 layui-col-sm4">
			
							<div class="cmdlist-container">
			
								<!--
												<a href="javascript:;">
													<img src="../layuiadmin/style/res/template/portrait.png">
												</a>
												-->
								<div class="item-top">
									<div class="top-line"></div>
								</div>
								<div class="item-title">
									<a href="javascript:;" class="item-name" title="《五年编程三年脱发》精选题库">
										《五年编程三年脱发》精选题库
										<p>
											更新于<span>2019-06-22 17:41</span>
										</p>
									</a>
								</div>
			
								<div class="cmdlist-text">
			
									<div class="item-intro">
										<p><span>6</span>道题</p>
										<button type="button" class="layui-btn layui-btn-sm layui-btn-normal">
													<i class="layui-icon layui-icon-add-1"></i>
										        	购买
												</button>
			
									</div>
								</div>
			
							</div>
			
						</div>

	
					</div>
					
					
		<div class="layui-row layui-col-space30">
			<div class="layui-col-md12 layui-col-sm12">
				<div id="demo0"></div>
			</div>
		</div>
				</div>

			</div>
			<div class="layui-col-md1">
				&nbsp;
			</div>
		</div>


		<script>
			
		</script>
	</body>

</html>